<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model List</title>
    <style>
        body {
            background-color: #121212;
            color: #ffffff;
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .tabs {
            display: flex;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #ffffff;
            margin-right: 10px;
        }
        .tab.active {
            background-color: #ffffff;
            color: #121212;
        }
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .folder {
            cursor: pointer;
            font-weight: bold;
            color: rgb(130, 88, 245);
        }
        .file {
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <h1>BizyAir Model List</h1>
    <div class="tabs">
        <div class="tab active" data-model-type="bizyair/lora">Lora</div>
        <div class="tab" data-model-type="bizyair/checkpoints">Checkpoints</div>
    </div>
    <div id="directory-structure"></div>

    <script>
        const directoryStructureContainer = document.getElementById('directory-structure');
        const tabs = document.querySelectorAll('.tab');

        function fetchData(modelType) {
            fetch('/bizyair/modelhost/list', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'model_type': modelType,
                })
            })
            .then(response => response.json())
            .then(data => {
                directoryStructureContainer.innerHTML = '';
                const ul = document.createElement('ul');
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = item;
                    li.classList.add('file');
                    ul.appendChild(li);
                });
                directoryStructureContainer.appendChild(ul);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                const modelType = tab.getAttribute('data-model-type');
                fetchData(modelType);
            });
        });

        // Initial fetch for the active tab
        fetchData('bizyair/lora');
    </script>
</body>
</html>
